<template>
   <!-- vue2.0需要根元素，vue3.0可以是代码片段 Fragment -->
   
   <!-- commit: 同步操作 -->
   <!-- dispatch: 异步操作 -->
   <!-- 比如向后台发送请求获取数据，就需要使用action的dispatch去完成了。 -->
   <!-- 其他使用commit即可。 -->


  <!-- 1.使用跟模块state的数据 -->
  <div>{{$store.state.username}}</div>
  <!-- 3.提交跟模块mutations函数 -->
  <!-- 3-2.方法2 -->
  <button @click="fn">改变名字</button>
  <!-- 在这里写要加$符号 -->
  <!-- 3-1.方法1 -->
  <button @click="$store.commit('editname')">改变</button>
  <!-- 4.调用跟模块actions函数 -->
  <button @click="$store.dispatch('updatename')">3秒后改变名字</button>
  <!-- 2.使用跟模块getters的数据 -->
  <!-- 可以使用state的数据方法，也可以使用下面的方法[] -->
  <div>{{$store.getters['newname']}}</div>
</template>

<script>
//引入它 可以拿到仓库实例
import {useStore} from 'vuex'
  export default{
    name:'App',
    setup(){
      //使用vuex仓库,
      const store=useStore();
      // 1.使用跟模块state的数据
      console.log(store.state.username);
      // 2.使用跟模块getters的数据
      console.log(store.getters.newname);
      // 3.提交跟模块mutations函数
      // 3-1.方法1
      // store.commit('editname');
      // 3-2.方法2
      const fn=()=>{
        // 调用跟模块mutations函数editname
        // 在这里写不用加$
        store.commit('editname');
      }
      // 4.调用跟模块actions函数
      // store.dispatch('updatename');
      return {fn}
    }
  }
</script>

<style>

</style>